<template>
  <div class="templ-table">
    <el-table
      class="templ-table"
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="40"></el-table-column>
      <el-table-column prop="tpl_name" label="模板名称" width="70px"></el-table-column>
      <el-table-column prop="task_type" label="任务类型" width="60px"></el-table-column>
      <el-table-column prop="ping_tai" label="平台" width="70px"></el-table-column>
      <el-table-column prop="shop_name" label="店铺名称" width="90px"></el-table-column>
      <el-table-column label="主图" width="50px">
        <template v-slot="{ row }">
          <img :src="row.c_img" alt style="width: 30px; height: 30px; margin-top: 3px;" />
        </template>
      </el-table-column>
      <el-table-column prop="kind_in" label="进入方式" width="60px"></el-table-column>
      <el-table-column prop="sku" label="宝贝SKU" width="80px"></el-table-column>
      <el-table-column prop="price" label="下单价格" width="60px"></el-table-column>
      <el-table-column prop="push_type" label="发布类型" width="70px"></el-table-column>
      <el-table-column prop="push_num" label="发布笔数" width="60px"></el-table-column>
      <el-table-column prop="sing_money" label="单笔佣金" width="60px"></el-table-column>
      <el-table-column prop="task_money" label="任务佣金" width="60px"></el-table-column>
      <el-table-column prop="setting" label="操作" width="134px" fixed="right">
        <template>
          <div class="settings">
            <el-button type="primary" size="mini">详情</el-button>
            <el-button type="default" size="mini">复制</el-button>
            <el-button type="danger" size="mini">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 合计 -->
    <div class="temp-total">
      <dl>
        <dt>统计</dt>
        <dd>
          <i>合计子任务数</i>
          <span>5</span>
        </dd>
        <dd>
          <i>合计总笔数</i>
          <span>15</span>
        </dd>
        <dd>
          <i>合计支付总佣金</i>
          <span>68.2</span>
        </dd>
      </dl>
    </div>

    <!-- 3.0 保存任务 -->
    <div class="task-submit">
      <el-button type="primary" size="mini">提交任务</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          tpl_name: '风火轮风衣',
          task_type: '垫付',
          ping_tai: '拼多多logo',
          shop_name: '风火轮旗舰店',
          c_img:
            'https://s10.mogucdn.com/mlcdn/c45406/181016_143l3ehl4ebad6c2326gjk6d4h41g_48x48.png',
          kind_in: '关键词',
          sku: '随机，1件',
          price: '17.6',
          push_type: '立即',
          push_num: 2,
          sing_money: 10.8,
          task_money: 21.6
        },
        {
          id: 2,
          tpl_name: '大毛领羽绒',
          task_type: '流量',
          ping_tai: '拼多多logo',
          shop_name: 'AAAAA旗舰店',
          c_img:
            'https://s10.mogucdn.com/mlcdn/c45406/181016_143l3ehl4ebad6c2326gjk6d4h41g_48x48.png',
          kind_in: '链接',
          sku: '黑，M；1件',
          price: 0,
          push_type: '定 13：00',
          push_num: 1,
          sing_money: 0.3,
          task_money: 0.3
        },
        {
          id: 3,
          tpl_name: '毛衣退款',
          task_type: '直播间',
          ping_tai: '淘宝logo',
          shop_name: 'BBBBB旗舰店',
          c_img:
            'https://s10.mogucdn.com/mlcdn/c45406/181016_143l3ehl4ebad6c2326gjk6d4h41g_48x48.png',
          kind_in: '关键词',
          sku: '随机，1件',
          price: 0,
          push_type: '间隔 30',
          push_num: 3,
          sing_money: 6.4,
          task_money: 19.2
        },
        {
          id: 4,
          tpl_name: '毛衣',
          task_type: '直播间',
          ping_tai: '淘宝logo',
          shop_name: 'CCCCC旗舰店',
          c_img:
            'https://s10.mogucdn.com/mlcdn/c45406/181016_143l3ehl4ebad6c2326gjk6d4h41g_48x48.png',
          kind_in: '口令',
          sku: '随机，1件',
          price: 26.4,
          push_type: '间隔 15',
          push_num: 4,
          sing_money: 6.4,
          task_money: 25.6
        },
        {
          id: 5,
          tpl_name: '教搭配',
          task_type: '短视频',
          ping_tai: '抖音logo',
          shop_name: 'DDDDD旗舰店',
          c_img:
            'https://s10.mogucdn.com/mlcdn/c45406/181016_143l3ehl4ebad6c2326gjk6d4h41g_48x48.png',
          kind_in: '二维码',
          sku: '随机，1件',
          price: 0,
          push_type: '间隔 5',
          push_num: 5,
          sing_money: 0.3,
          task_money: 1.5
        }
      ]
    }
  },
  methods: {
    handleSelectionChange() {}
  }
}
</script>

<style lang="scss" scoped>
.el-table {
  text-align: center;
  font-size: 12px;

  .el-button {
    padding: 4px 6px;
    margin: 0;
    margin-right: 5px;
  }

  .settings {
    float: left;
    padding-left: 4px;
    text-align: center;
  }
}

.temp-total {
  margin-top: 50px;
  dl {
    display: flex;
    text-align: center;
    line-height: 32px;
    dt {
      flex: 0.5;
      background-color: #e4e4e4;
      letter-spacing: 5px;
      font-weight: 700;
    }
    dd {
      flex: 1;
      display: flex;
      border: 1px solid #eee;
      margin-left: -1px;
      i {
        flex: 1.5;
        font-style: normal;
      }
      span {
        flex: 2;
        border-left: 1px solid #eee;
      }
    }
  }
}

.task-submit {
  margin: 40px 0 30px;
  text-align: center;

  .el-button {
    width: 50%;
    height: 30px;
    letter-spacing: 10px;
  }
}
</style>
